<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-family属性说明</title>
    <style>

        /*
        功能:
            设置页面的字体.
        说明:
            1. font-family属性的值是以逗号隔开的多个值, 这么做是有原因的:
                - font-family属性应该包含几个字体名称作为备选。 在CSS样式中指定Web字体时，请添加多个字体名称，以避免意外的行为。
                如果客户端计算机出于某种原因没有您选择的字体时，则会尝试下一个字体.
                - 指定通用字体系列是一个很好的做法，如果没有其他字体可用，让浏览器在通用系列中选择相似的字体。
                - 设置多个字体时, 越靠前设置的字体优先级越高.
        */
        .serif {
            font-family: "Times New Roman", Times, serif;
        }
        .sansserif {
            font-family: Helvetica, Arial, sans-serif;
        }
        .monospace {
            /*
            注意:
                1. 如果一个字体名称不止一个单词, 需要用""包起来.
            */
            font-family: "Courier New", Courier, monospace;
        }
        .cursive {
            font-family: Florence, cursive;
        }
        .fantasy {
            font-family: Blippo, fantasy;
        }

    </style>
</head>
<body>
<p class="serif">
    This is a paragraph shown in serif font.
</p>
<p class="sansserif">
    This is a paragraph shown in sans-serif font.
</p>
<p class="monospace">
    This is a paragraph shown in monospace font.
</p>
<p class="cursive">
    This is a paragraph shown in cursive font.
</p>
<p class="fantasy">
    This is a paragraph shown in fantasy font.
</p>
</body>
</html>